
var menuBreakfastSettings = {
		
		panel: null,
		treeStore: null,
		menuTreePanel: null,
		contentPanel: null,
		
		menuCenterBottomPanel: null,
		menuCenterPanel:null,
		menuCenterTopPanel: null,
		menuTitle: null,
	    menuPrecio: null,
	    menuDescripcion: null,
	    menuHiddenId: null,
	    menuAction: null,
	    menuFoto: null,
	    menuFotoButton: null,
	    menuFotoPanel: null,
	    
		
		initialize: function() {
			var oThis = this;
			
			this.treeStore = Ext.create('Ext.data.TreeStore', {
				proxy: {
			    	type: 'ajax',
			        url: 'RestaurantAdminServices?request=GETMENUS&restauranteid='+login.restaurantId+'&type=Desayuno'
			    },
			    autoload: true
		    });
			
			this.menuTreePanel = Ext.create('Ext.tree.Panel',{
				region: 'west',
				width: 200,
				border: false,
				rootVisible: false,
				store: this.treeStore
			}); 
			
			
			this.menuHiddenId = Ext.create('Ext.form.field.Hidden',{
				 name: 'menuid',
				 labelWidth: 60
			});

			this.menuTitle = Ext.create('Ext.form.TextField',{
				name:'nombre',
				fieldLabel: 'Nombre',
				allowBlank: false,
				labelWidth: 60
			});
			this.menuPrecio = Ext.create('Ext.form.field.Number',{
				name: 'precio',
				labelWidth: 60,
				allowBlank: false,
				fieldLabel: 'Precio'
			});
			
			this.menuDescripcion = Ext.create('Ext.form.HtmlEditor', {
				name:'descripcion',
				fieldLabel: 'Descripcion',
				labelAlign: 'top',
				allowBlank: false,
				width: '98%',
			    height: 250
			});
			
			this.menuFoto = Ext.create('Ext.form.field.File',{
				id: 'foto_menu_breakfast_upload',
				fieldLabel: 'Foto',
				labelWidth: 35,
				width: 250,
				name: 'foto',
				listeners:{
					change: function(){ 
						oThis.menuFotoUpdate = true;
					}
				}
			});
			
			this.menuFotoPanel = Ext.create('Ext.panel.Panel',{
				id: "menu_breakfast_foto_panel",
				border: false,
				width: 200,
				height: 100
			});
			this.menuCenterTopPanel = Ext.create('Ext.form.FormPanel',{
				bodyPadding: '5px 5px 0',
		        layout: 'hbox',
		        region: 'center',
		        border: false,
		        defaults: {
		            border: false,
		            xtype: 'form',
		            flex: 1
		        },
		        items: [{
		        	id: 'menuBreakfastCenterTopLeft',
		            items: [this.menuTitle,
		                     this.menuPrecio,
		                     this.menuHiddenId]
		        }, {
		        	id: 'menuBreakfastCenterTopRight',
			        items:[this.menuFoto,this.menuFotoPanel]
		        }]
			});
			
			this.menuCenterBottomPanel = Ext.create('Ext.form.FormPanel',{
				bodyPadding: 5,
		        border: false,
		        region: 'south',
		        items: [this.menuDescripcion]
			});
			this.menuCenterPanel = Ext.create('Ext.form.FormPanel',{
				id: 'menuBreakfastCenterPanel',
				region: 'center',
				border: false,
				bodyStyle: 'background:white;',
				layout: 'border',
				header: false,
				bodyPadding: 5,
				items:[this.menuCenterTopPanel, this.menuCenterBottomPanel],
				buttonAlign: 'right',	
			    buttons:[{
			    	id: 'edit_fields_breakfast_menu',
			    	xtype: 'button',
			    	disabled: true,
			    	text: 'Editar campos',
			    	icon: './images/icons/Settings-icon.png',
			    	handler: function(){
			    		oThis.enableFields();
			    	}
			    },{
			    	id: 'new_breakfast_menu',
			    	xtype: 'button',
			    	disabled: true,
			    	text: 'Nuevo',
			    	icon: './images/icons/drop-add.gif',
			    	handler: function(){
			    		oThis.panel.getForm().reset();
						oThis.menuFotoPanel.update("");
			    		oThis.enableFields();
			    		Ext.getCmp('delete_breakfast_menu').disable();
			    	}
			    },{
			    	id: 'delete_breakfast_menu',
			    	xtype: 'button',
			    	disabled: true,
			    	text: 'Eliminar',
			    	icon: './images/icons/delete.gif',
			    	handler: function(){
			    		oThis.deleteMenu();
			    	}
			    }]
			}); 
			
			this.panel = Ext.create('Ext.form.Panel',{
				id: 'menu_breakfast_form',
				xtype: 'form',
				header: false,
				anchor: '100% 100%',
				layout: 'anchor',
				border: false,
				bodyPadding: 10,			
				items: [{
					xtype:'fieldset',
					id: 'menu_breakfast_fieldset',
			        title: '<img src="./images/icons/breakfast.gif" /><span class="menu-item-text">Desayunos</span>',
			        collapsible: false,
			        anchor: '98% 100%',
			        layout: 'border',
			        defaultType: 'textfield',
			        items: [this.menuTreePanel,this.menuCenterPanel]
				}],
				buttons: [{
					text: 'Guardar..',
					id: 'menu_breakfast_save_button',
					icon: './images/icons/save-icon.png',
					handler: function(){
						oThis.save();
						Ext.getCmp('delete_breakfast_menu').disable();
					}
				}, {
					text: 'Cancelar.',
					id: 'menu_breakfast_cancel_button',
					icon: './images/icons/cross-icon.png',
					handler: function(){
						oThis.panel.getForm().reset();
						oThis.menuFotoPanel.update("");
					}
				}]
			});
			
			this.menuTreePanel.on('select', function(tree, record, index, eOpts){oThis.menuSelected(record);});
			this.panel.doLayout();
		},
		
		deleteMenu: function(){
			var oThis = this;
			Ext.Ajax.request({
			    url: 'RestaurantAdminServices',
			    params: {
			    	request: 'DELETEMENU',
			        menuid: this.menuHiddenId.getValue(),
			        restaurantid: login.restaurantId
			    },
			    success: function(response){
			    	oThis.menuTreePanel.getStore().reload();
      				oThis.panel.getForm().reset();
      				oThis.menuFotoPanel.update("");
      				Ext.getCmp('delete_breakfast_menu').disable();
			    }
			});
		},
		
		save: function(){
			var oThis = this;
			var request = "";
			if(this.menuHiddenId.getValue() == ''){
				request = "NEWMENU";
			}else {
				request = "UPDATEMENU";
			}
			
			if(this.panel.getForm().isValid()){
				this.panel.getForm().submit({
			        url: 'RestaurantAdminServices?request='+request,
			        params: {
			        	restauranteid: login.restaurantId,
			        	tipo: 'Desayuno'
			        },
			        onSuccess: function(f,action){
	      				oThis.menuTreePanel.getStore().reload();
	      				oThis.panel.getForm().reset();
	      				oThis.menuFotoPanel.update("");
			        },
				    onFailure: function(form, a) {
				    	Ext.Msg.alert('Failure', 'ERROR');
				    }
				});
			}	
		},
		
		menuSelected: function(record){
			var precio = record.raw.precio;
			var descripcion = record.raw.descripcion;		
			var nombre = record.raw.text;
			var tipo = record.raw.tipo;
			var menuid = record.raw.menuid;
			
			this.menuHiddenId.setValue(menuid);
			this.menuTitle.setValue(nombre);
			this.menuPrecio.setValue(precio);
			this.menuDescripcion.setValue(descripcion);
			this.menuFoto.setRawValue(record.raw.foto);
			this.menuFotoPanel.update('<img class="places_foto" src="'+record.raw.foto+'" width="200" height="100"></img>');
			
			this.menuHiddenId.setReadOnly(true);
			this.menuTitle.setReadOnly(true);
			this.menuPrecio.setReadOnly(true);
			this.menuDescripcion.setReadOnly(true);
			this.menuFoto.setReadOnly(true);
			
			Ext.getCmp('edit_fields_breakfast_menu').enable();
			Ext.getCmp('new_breakfast_menu').enable();
			Ext.getCmp('delete_breakfast_menu').enable();
		},
		
		enableFields: function(){
			this.menuHiddenId.setReadOnly(false);
			this.menuTitle.setReadOnly(false);
			this.menuPrecio.setReadOnly(false);
			this.menuDescripcion.setReadOnly(false);
			this.menuFoto.setReadOnly(false);
			
		},
		
		getPanel:function(){
			return this.panel;
		}
};